<nz-modal (nzOnCancel)="handlerCancel()" [(nzVisible)]="visible" nzMaskClosable="false"
  nzTitle="{{'common.delete'|translate}} {{'common.database'|translate}}" nzWidth="70%">
  <div *nzModalContent>
    <form nz-form>
      <nz-form-item>
        <nz-form-control [nzSpan]="24">
          <nz-alert nzBanner
            nzMessage="We don't recommend that you delete the database [{{value}}]? This operation produces the following?">
          </nz-alert>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzSpan]="24">
          <nz-tag [nzColor]="'#f50'">No rollback</nz-tag>
          All data files generated in this table will be removed from the relevant Clickhouse server file system
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzSpan]="24">
          <nz-tag [nzColor]="'#f50'">No rollback</nz-tag>
          All data files generated in this table will be removed from the relevant Clickhouse server file system
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzSpan]="24">
          If you want to confirm the deletion, enter the table name in the
          <input nz-input [(ngModel)]="inputValue" name="inputValue" (change)="handlerValidate()" />
          and click the delete button below
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzSpan]="24">
          <nz-spin nzSimple *ngIf="getTables; else hadTables">
          </nz-spin>
          <ng-template #hadTables>
            <nz-collapse>
              <nz-collapse-panel nzHeader="{{'common.table'|translate}} {{tables?.length}}">
                <nz-alert nzType="error" nzMessage="Delete all data tables before deleting the database"
                  style="margin-bottom: 10px;"></nz-alert>
                <nz-tag [nzColor]="'blue'" *ngFor="let table of tables">
                  {{table.name}}
                </nz-tag>
              </nz-collapse-panel>
            </nz-collapse>
          </ng-template>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
  <div *nzModalFooter>
    <button nz-button nzType="primary" nzDanger [disabled]="disabled.button" [nzLoading]="loading.button"
      (click)="handlerDelete()">
      <span>{{'common.delete'|translate}}</span>
    </button>
  </div>
</nz-modal>